<template>
  <div>
    <c-title text="打水"></c-title>
    <div class="fetch-water">
      <div class="head">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/bg_vip.png" />
        <div class="head-box">
          <div style="margin-top: 0.625rem; text-align: left;">{{ member.card ? member.card.card_no : ''}}</div>
          <div style="display: flex; justify-content: space-between; margin-top: 1.4688rem; align-items: center;">
            <div>
              <span>{{ $i18n.t('money') }}</span>
              <span style="font-size: 1.75rem; margin-left: 0.1rem;">{{ member.card && member.card.balance || 0 }}</span>
            </div>
            <div>长期有效</div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="start" @click="start">开始取水</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      member: {},
      device_no:"",
    };
  },
  activated() {
    this.device_no = this.$route.query.device_no || '';
    this.getData();
  },
  methods: {
    getData() {
      $http.get('plugin.water-machine.frontend.consumer.member-card.index').then(res => {
        if (res.result) {
          this.member = res.data.member;
          if(res.data.device_no){
            this.device_no = res.data.device_no;
          }
        } else {
          this.$toast(res.msg);
        }
      })
    },
    start() {
      let json = {
        card_no: this.member.card.card_no,
        device_no: this.device_no
      }
      $http.post('plugin.water-machine.frontend.consumer.dispenser.fetch', json).then(res => {
        this.$toast(res.msg);
      })
    }
  }
};
</script>

<style scoped lang="scss">
.fetch-water {
  .head-box {
    padding: 1.5625rem 2.625rem 1.5625rem 1.6875rem;
    color: #fff;
    box-sizing: border-box;
  }

  .fz-28 {
    font-size: 1.75rem;
  }

  .c-ffb55e {
    color: #ffb55e;
  }

  .start {
    border-radius: 3.125rem;
    background: #fe5e56;
    color: #fff;
    text-align: center;
    padding: 0.625rem 8.125rem;
    box-sizing: border-box;
  }

  .end {
    margin-top: 1.125rem;
    border-radius: 3.125rem;
    background: #fff;
    color: #fe5e56;
    text-align: center;
    border: 0.0313rem solid #fe5e56;
    padding: 0.625rem 8.125rem;
    box-sizing: border-box;
  }

  .box {
    font-size: 0.9375rem;
    margin-left: 1.5625rem;
    margin-top: 1.6563rem;
    margin-right: 1.5625rem;
  }

  .head {
    position: relative;
    color: #fff;
  }

  .head img {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 10.5625rem;
    z-index: -1;
  }
}
</style>
